<template>
  <div class="simpleSurface" id="simpleSurface"></div>
</template>

<script>
export default {
  name: "simpleSurface",
  //import引入的组件需要注入到对象中才能使用",
  components: {},
  data() {
    //这里存放数据",
    return {};
  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    drawSimpleSurface() {
      // 基于准备好的dom，初始化echarts实例
      let simpleSurface = this.$echarts.init(
        document.getElementById("simpleSurface")
      );
      // 绘制图表
      simpleSurface.setOption({
        tooltip: {},
        backgroundColor: "#fff",
        visualMap: {
          show: false,
          dimension: 2,
          min: -1,
          max: 1,
          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026"
            ]
          }
        },
        xAxis3D: {
          type: "value"
        },
        yAxis3D: {
          type: "value"
        },
        zAxis3D: {
          type: "value"
        },
        grid3D: {
          viewControl: {
            // projection: 'orthographic'
          }
        },
        series: [
          {
            type: "surface",
            wireframe: {
              // show: false
            },
            equation: {
              x: {
                step: 0.05
              },
              y: {
                step: 0.05
              },
              z: function(x, y) {
                if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
                  return "-";
                }
                return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
              }
            }
          }
        ]
      });
    }
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {},

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {},
  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {},

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
    this.drawSimpleSurface();
  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {},
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {},
  //生命周期 - 销毁之前",
  beforeDestroy() {},
  destroyed() {},
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {}
};
</script>

<style>
.simpleSurface {
  width: 100%;
  height: 300px;
}
</style>
